<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js "></script>
</head>

<body>
    <div id="app">
        <!-- <div id="app" v-my-directive> -->
        <!-- <input type="text" v-myfocus="true"> -->
        <!-- 根据条件判断 -->

        <!-- 4.应用插件 -->


        <!-- <div id="app1">
                app1:{{title}}
            </div>
            <div id="app2">
                app2:{{title}}
            </div> -->

        <!-- <div id="app">
            {{a}}

        </div>
        <div>{{obj.b}}</div> -->

    </div>

    <script>
        // Vue.directive("myfocus", {
        //     // insert使用当前指令元素，在插入到dome界面中，让此元素获得焦点
        //     inserted(el, binding) {
        //         if (binding.value) {
        //             el.focus();
        //         }
        //     }
        // })
        // vm = new Vue({
        //     el: '#app'
        // })

        // 1.定义插件对象
        // let MyPlugin = {};
        // // 2.编写插件对象install的方法
        // MyPlugin.install = function (Vue, options) {//vue构造器  选项
        //     //创建自定义指令
        //     Vue.directive('my-directive', {
        //         bind(el, binding) {
        //             // 修改指令的样式
        //             el.style = "width:100px;height:100px;background-color:red"
        //         }
        //     })
        // }
        // // 3.利用Vue.use安装插件
        // Vue.use(MyPlugin, { someOption: true });

        //创建子类
        // var Vue1=Vue.extend({
        //     data(){
        //         return{
        //             title:"hello"
        //         }
        //     }
        // })
        // var vm = new Vue({
        //     el: '#app1',
        //     data:{
        //         title:"good"
        //     }
        // })
        // var vm1 = new Vue1({
        //     el: '#app2'
        // })
        // console.log(vm1);

        // var vm = new Vue({
        //     el: '#app',
        //     data: {
        //         a: "我是基础数据，是根缀响应式属性a",
        //         obj: {
        //             // b: 'xxxxxxx'
        //         }
        //     }
        // })
        //动态赋值
        // Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b');
        // Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b');
        // Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b');

        Vue.mixin({
            created(){
                console.log("我是混入对象的钩子函数")
                var myOption=this.$options.myOption;
                if(myOption){
                    console.log(myOption.toUpperCase());
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            myOption:"hello vue",
            data: {
                a: "我是基础数据，是根缀响应式属性a",
                // obj: {
                //     // b: 'xxxxxxx'
                // }
            },
            created(){
                console.log("我是vue实例对象的钩子函数")
            }
        })
    </script>
</body>

</html>